<template>
  <el-dialog
      :title="type === 'add' ? '添加菜单' : '修改菜单'"
      v-model="visible"
      width="800px"
  >
    <el-transfer
        :titles="['未有权限', '已有权限']"
        :button-texts="['删除权限', '添加权限']"
        v-model="info"
        :data="dataInfo"
        :props="{key:'id', label:'name'}"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenus">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {reactive, toRefs} from "vue";
import {useRoute} from "vue-router";
import {ElMessage, ElTransfer} from "element-plus";
import axios from "axios";

export default {
  name: "MenuChoose",
  components: {
    ElTransfer
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      visible: false,
      id: '',
      dataInfo: [],
      info: []
    })
    // 开启弹窗
    const open = (id) => {
      state.visible = true
      if (id) {
        state.id = id
        axios.get(`/evaluate/menu/role/${id}`).then(data => {
          state.info = data.ownRoles;
          state.dataInfo = data.allRoles
        })
      }
    }

    const saveMenus = () => {
      console.log("开始保存")
      axios.post(`/evaluate/menu/role/${state.id}`, {ids: state.info}).then(data => {
        ElMessage.success('保存成功！')
        close()
      })
    }
    // 关闭弹窗
    const close = () => {
      state.info = [];
      state.dataInfo = [];
      state.id = ''
      state.visible = false
    }

    return {
      ...toRefs(state),
      open,
      saveMenus,
      close
    }
  }
}
</script>

<style scoped>

</style>